<script setup lang="ts">
import IconFont from "@/components/IconFont/IconFont.vue";
import GardenCrop, {Pumpkin} from "@/modal/GardenCrop";
import {IconColor, IconType} from "@/components/IconFont/type";
import {computed, type Reactive, watch} from "vue";

interface iPumpkin {
  pumpkin: Reactive<Pumpkin>;
}

const props = defineProps<iPumpkin>();
const pumpkin: Reactive<Pumpkin> = props.pumpkin
const growUp: Function = (pumpkin: GardenCrop) => {
  emits('emitGrowUp', pumpkin);
}
const emits = defineEmits(['emitGrowUp']);
const pumpkin_isRipen = computed(() => pumpkin.isRipen);
watch(pumpkin_isRipen, (value, oldValue) => {
  pumpkin.getAward();
})

</script>
<template>
  <div class="container"
       @click="growUp(pumpkin)">
    <div class="crops">
      <div v-for="index in pumpkin.ripeStage"
           :class="{active: pumpkin.currentStep >= index }">
        <div class="icon-left">
          <IconFont v-if="index == pumpkin.ripeStage"
                    :icon-type="IconType.GOODS"
                    :number="pumpkin.goodsNum"
                    :color="IconColor.GOODS"
                    font-size="x-large">
          </IconFont>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.crops {
  display: flex;
  flex-direction: column-reverse;
}

.crops > div {
  position: relative;
  display: flex;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  box-sizing: border-box;
  border: 1px solid rgb(238, 160, 46);
  transition: all .6s;
}

.crops > div.active:not(:last-child) {
  background-color: rgb(238, 160, 46);
}

/* 顶掉上面的选择器 */
.crops > div.active:last-child {
  background-color: rgb(238, 160, 46);
}

.crops > div:last-child {
  border-radius: 50%;
}

.icon-left {
  margin-left: -40px;
  align-self: center;
}
</style>
